<template>
  <client-only>
    <el-dialog :model-value="props.visible" title="收银台" width="500px" align-center destroy-on-close @close="onClose">
      <div class="goods-qrcode">
        <div class="goods-qrcode-title">
          正在使用
          <common-enum-view :enum-name="'PayType'" :enum-value="props.orderInfo.payType" />
          支付：￥{{ props.orderInfo.paidAmount.toFixed(2) }}
        </div>

        <!-- 支付二维码 -->
        <canvas v-if="orderStatus === 1" id="canvas" />

        <!-- 支付成功 -->
        <div v-if="orderStatus === 2" class="order-info-title">
          <img src="~/assets/svg/success.svg" class="order-info-img" alt="" />
          <br />
          <br />
          <div>支付成功</div>
        </div>

        <!-- 支付失败 -->
        <div v-if="orderStatus === 3" class="order-info-title">
          <img src="~/assets/svg/error.svg" class="order-info-img" alt="" />
          <div>支付失败</div>
        </div>

        <div v-if="props.orderInfo.payType !== 9" class="goods-qrcode-desc">请扫描二维码完成订单</div>
        <div v-if="props.orderInfo.payType !== 9" class="goods-qrcode-tips">
          提示: <br />
          支付成功前请勿手动关闭页面 <br />
          二维码两小时内有效，请及时扫码支付
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="onClose">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </client-only>
</template>
<script setup>
  import QRCode from 'qrcode'
  import { orderApi } from '~/api/order'

  const props = defineProps({
    orderInfo: { type: Object, default: () => {} },
    visible: { type: Boolean, default: false }
  })
  // 订单状态
  const orderStatus = ref(props.orderInfo.orderStatus)

  // 执行器
  let orderQueryInterval = null
  onMounted(async () => {
    await nextTick(() => {
      if (props.orderInfo.payMessage) {
        QRCode.toCanvas(document.getElementById('canvas'), props.orderInfo.payMessage, { width: 250, height: 250 })
      }
    })
    orderQueryInterval = setInterval(() => {
      if (orderStatus.value === 1) {
        orderQuery(props.orderInfo.tradeSerialNo)
      }
    }, 3000)
  })

  onUnmounted(() => {
    clearInterval(orderQueryInterval)
  })

  // 订单查询
  async function orderQuery(tradeSerialNo) {
    const res = await orderApi.payResult({ tradeSerialNo: tradeSerialNo })
    orderStatus.value = res.orderStatus
    if (orderStatus.value === 2) {
      ElMessage.success('支付成功')
    } else if (orderStatus.value === 3) {
      ElMessage.error('支付失败')
    }
  }

  // 关闭
  const emit = defineEmits(['close'])
  const onClose = () => {
    clearInterval(orderQueryInterval)
    emit('close', orderStatus.value)
  }
</script>
<style lang="scss" scoped>
  .goods-qrcode {
    padding: 0 20px;
    text-align: center;
    .goods-qrcode-desc {
      margin: 0 auto;
      width: 160px;
      padding: 13px 0 13px 70px;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      color: #fff;
      background: url()
        no-repeat 20px center #445f85;
    }

    .order-info-img {
      height: 100px;
      width: auto;
    }
    .goods-qrcode-tips {
      margin-top: 30px;
      text-align: left;
    }

    .order-info-title {
      margin: 60px 0;
    }
  }
</style>
